<template>
  <div id="gobang">
    <el-dialog title="联机大厅" :visible.sync="dialogVisible" width="80%" :append-to-body="true">
      <div>
        <div style="display:flex;justify-content: space-between;">
          <el-button size="small" type="primary" round @click="createRoom">
            <i class="el-icon-plus"></i>创建房间
          </el-button>
          <el-button size="small" round @click="refresh">
            <i class="el-icon-refresh"></i>刷新
          </el-button>
        </div>
        <el-table
          :data="rooms.filter(data => !search || data.name.includes(search))"
          style="width: 100%"
        >
          <el-table-column label="房间名" prop="name">
            <template slot-scope="scope">
              <div v-if="game.account.name==scope.row.manage">(我的房间)</div>
              <div>{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="人数">
            <template slot-scope="scope">
              <div>{{scope.row.members.length}}/{{scope.row.maxMember}}</div>
            </template>
          </el-table-column>

          <el-table-column>
            <template slot="header">
              <el-input v-model="search" maxlength="10" size="mini" placeholder="搜索"></el-input>
            </template>
            <template slot-scope="scope">
              <el-button type="text" v-if="game.account.name==scope.row.manage" @click="delRoom">删除</el-button>
              <el-button type="text" v-else @click="joinRoom(scope.row)">加入</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { load } from "./js/index";

export default {
  name: "",
  components: {},
  props: {},
  model: [],
  data() {
    return {
      game: null,
      rooms: [],
      maxRoom: 0,
      dialogVisible: false,

      search: "",
    };
  },
  filters: {},
  computed: {},
  methods: {
    // 登录
    notify(title, message, duration) {
      this.$notify({
        title: title,
        message: message || "",
        duration: duration || 4500,
      });
    },
    _login() {
      this.game.ws.send(
        {
          func: "login",
        },
        (res) => {
          this.game.account = res;
          this.notify("登录成功", "欢迎," + res.name, 3000);
          this.toOnLineScene();
        }
      );
    },
    toOnLineScene() {
      if (this.game.account.chessBoard) {
        this.game.scene.scenes[0].scene.switch("OnLineScene");
      } else {
        this.dialogVisible = true;
        this.refresh();
      }
    },
    onlineRoom() {
      if (this.game.account.name) {
        this.toOnLineScene();
      } else {
        this._login();
      }
    },
    refresh() {
      if (this.game.ws.ws.readyState != 1) {
        this.notify("服务器连接失败，请稍后再试");
        return;
      }
      this.game.ws.send(
        {
          func: "getRoom",
        },
        (res) => {
          (this.rooms = res.rooms), (this.maxRoom = res.maxRoom);
        }
      );
    },
    createRoom() {
      this.$prompt("请输入房间名", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{1,12}$/,
        inputErrorMessage: "限制12位",
      }).then(({ value }) => {
        this.game.ws.send(
          {
            func: "createRoom",
            name: value,
          },
          (res) => {
            if (res.code != 0) {
              this.notify(res.mes);
              return;
            }
            this.refresh();
          }
        );
      });
    },
    joinRoom(room) {
      this.game.ws.send(
        {
          func: "joinRoom",
          name: room.name,
        },
        (res) => {
          if (res.code != 0) {
            this.dialogVisible = false
            this.notify(res.mes);
            return;
          }
        }
      );
    },
    delRoom() {
      this.game.ws.send(
        {
          func: "delRoom",
        },
        (res) => {
          this.refresh();
        }
      );
    },
  },
  mounted() {
    this.game = load(this);
    setTimeout(() => {
      // this.onlineRoom();
    }, 1000);
  },
  created() {},
};
/*
bug日志
联机大厅对话框
  弹出时 可以点击穿透到底部图层 
  搜索框不能输入多个字符且无显示 

*/
</script>

<style scoped="">
.room {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
}
</style>

